<template>
    <div class="wai" ><router-link to="/Echarts">数据分析</router-link>
        <header>
          <h1>数据分析展示</h1>
          <div class="showTime">213123</div>


          <div class="one">
            <div class="one2" id="mian"></div>
            <div class="one2" id="zxt"></div>
            <div class="one2" id="bing"></div>

            </div>


          <div class="two">
            <div class="two1">
              <div class="twotwo">
                <div class="left" style="width: 50%;height: 120px;margin: 0 auto;float: left;"align="center">2134</div>
                <div class="right"style="width: 50%;height: 80px;margin: 0 auto;float: left"align="center">2134</div>
              </div>
              <div class="twotwo1">
                <div class="left" style="width: 50%;height: 80px;margin: 0 auto;float: left;"align="center">2134</div>
                <div class="right"style="width: 50%;height: 80px;margin: 0 auto;float: left"align="center">2134</div>
              </div>
            </div>

            <div class="two2">
              <div class="map">
                <div class="fangmap">
                  <div class="map1"></div>
                  <div class="map2"></div>
                  <div class="china" id="ditu"></div>
                </div>
              </div>
            </div>
          </div>



          <div class="three">
            <div class="one1" id="hzzt"></div>
            <div class="one2" id="yuanrun"></div>
            <div class="one2" id="sandian"></div>
          </div>
        </header>

      <div class="mianbox"></div>
    </div>
</template>


<script>
import axios from "axios";

export default {
  name: 'shujufenxi',
  data(){
    return{
      liwuXList:[],
      liwuYList:[],
      bfbXList:[],
    }
  },
  methods:{
    sandian(){
      var myChart5 = this.$echarts.init(document.getElementById('sandian'));
     var  option6 = {
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center',
          textStyle:{
            //文字颜色
            color:'#ccc',
          }

        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart5.setOption(option6)
    },
    bing(){
      var myChart4 = this.$echarts.init(document.getElementById('bing'));
      var option5 = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          color:"white",
          textStyle:{
            //文字颜色
            color:'#ccc',
          }
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ]
          }
        ]
      };
      myChart4.setOption(option5)
    },
    yuanrun(){
      var myChart3 = this.$echarts.init(document.getElementById('yuanrun'));
      var option4 = {
        title: {
          text: '视频区域分布图',
          color:"white",
          textStyle:{
            //文字颜色
            color:'#ccc',
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },

        ],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel:{
          color:"#fff",
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },

          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },

        ]
      };
      myChart3.setOption(option4)
    },
    zhexiantu(){
      var myChart2 = this.$echarts.init(document.getElementById('zxt'));
     var  option3 = {
        title: {
          text: '折线图堆叠',
          color:"white",
          textStyle:{
            //文字颜色
            color:'#ccc',
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [  '邮件营销', '联盟广告'],
          textStyle:{
            color:"red",
          },
          right:"10%"
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          show: true,
          bprderColor:"#012f4a",
          containLabel: true,

        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
       axisLine: {
         show: false,
       },
       axisTick: {
         show: false,
       },
       axisLabel:{
         color:"#fff",
       },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },

        ]
      };
      myChart2.setOption(option3)
    },
    hengzhuzhuangtu(){
      var myChart1 = this.$echarts.init(document.getElementById('hzzt'));
     var  nanshou = {
        title: {
          text: '礼物价格',
          subtext: '数据来自数据库',
          textStyle:{
            //文字颜色
            color:'#ccc',
          }
        },

        grid: {
          left: '3%',
          right: '10%',
          bottom: '10%',
          containLabel: true,

        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['英雄联盟', '穿越火线', '赛博朋克', '反恐精英', '其他', ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel:{
            color:"#fff",
          }
        },
        series: [
          {
            name: '条',
            type: 'bar',
            data: this.bfbXList,
            yAxisIndex: 0,
            itemStyle:{
              barBorderRadius:20
            },
            barCategoryGap:50,
            barWidth:10,
            label:{
              show :true,
              position:"inside",
              formatter:"{c}￥",
            }
          },
          {
            name: '框',
            type: 'bar',
            barCategoryGap:50,
            barWidth: 15,
            yAxisIndex: 0,
            data: [2000, 2000, 2000, 2000, 2000],

            itemStyle:{
              color:"none",
              borderColor:"@00c1de",
              borderWidth:3,
              barBorderRadius:15
            },
          }
        ]
      };
      myChart1.setOption(nanshou)

    },
    myEcharts(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('mian'));

      // 指定图表的配置项和数据
      var option = {
        color:["blue"],
        title: {
          text: '礼物贡献值',
          color:"white",
          textStyle:{
            //文字颜色
            color:'#ccc',
          }
        },
        tooltip: {},
        legend: {
          data:['销量']
        },

        grid: {

          containLabel: true,
          show: true,
          bprderColor:"white",
        },
        toolbox:{
          feature:{
            saveAsImage:{}
          }
        },
        xAxis: {
          data: this.liwuXList,

        },
        axisLabel:{
          color: "white",
          fontSize: "20",
        },
        yAxis: {},
        series: [{
          name: '热度',
          type: 'bar',
          data: this.liwuYList,

        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    },
    selectliwu:function (){
      axios.get("http://localhost:7000/live-live/live/liwuList").then(res=>{
        if(res.data.code==200){
          this.liwuXList=res.data.xlist
          this.liwuYList=res.data.ylist
          this.myEcharts();
        }
      })
    },
    selectbfb:function (){
      axios.get("http://localhost:7000/live-live/live/bfbList").then(res=>{
        if(res.data.code==200){
          this.bfbXList=res.data.xlist
          this.hengzhuzhuangtu();
        }
      })
    }
  },
  mounted() {

    this.hengzhuzhuangtu();
    this.zhexiantu();
    this.yuanrun();
    this.bing();
    this.sandian();
    this.selectliwu();
    this.selectbfb();
  }
}
</script>



<style scoped>
h2{
  text-align: center;
  padding: 30px;
  font-size: 18px;
}
#chart_example {
  width: 50%;
  height: 500px;
  border: 1px solid red;
  margin: 0 auto;
}
.china{
  width: 965px;
  height: 624px;
 /* background-color: yellow;*/
  float: left;
  margin-top: -630px;
  margin-left: -230px;
}
.fangmap{
  height: 519px;
  width: 519px;
  /* background-color: red; */
  margin-top: 36px;
  float: left;
  margin-left: 230px;
}

.map2{
  height: 643px;
  width: 643px;
  background-size:cover;
  opacity: 0.3;
  background: url("../../build/lbx.png");
  float: left;
  margin-left: -68px;
  margin-top: -589px;

}
.map1{
  height: 519px;
  width: 519px;
  background-size:cover;
  opacity: 0.3;
  background: url("../../build/map.png");
  margin-top: 20px;
}
.map{
  width: 100%;
  height: 623px;
 /* background-color: aqua;*/
}
.twotwo{
  width: 90%;
  height: 120px;
  margin: 0 auto;
 /* background-color: aqua;*/
  margin-top: 30px;
  font-size: 80px;
  color: yellow;
  font-family: "electronicFont";
}
.twotwo1{
  width: 90%;
  height: 80px;
  margin: 0 auto;
 /* background-color: cornflowerblue;*/
  font-size: 50px;
  font-family: "electronicFont";

}
.two1{
  width: 90%;
  height: 200px;
  margin: 0 auto;
  background :rgba(101,132,226,0.1);
  margin-top: 30px;
}
.two2{
  width: 80%;
 /* height: 1000px;*/
  margin: 0 auto;
 /* background-color: #99a9bf;*/
  margin-top: 70px;
}
.one1{
  width: 100%;
  height: 300px;
  background :rgba(101,132,226,0.1);

}
.one2{
  width: 100%;
  height: 300px;
  background :rgba(101,132,226,0.1);
margin-top: 12px;
}
.one{
  width: 20%;
  height: 923px;
 /* background-color:pink ;*/
  float: left;
}
.two{
  width: 60%;
  height: 923px;
/*  background-color: pink;*/
  float: left;
}
.three{
  width: 20%;
  height: 923px;
  /*background-color: pink;*/
  float: left;
}
.mianbox{

  width: 100px;


  height: 923px;
  padding: 10px 10px 0;
}
header {

  height: 100px;
/*  background-color: pink;*/
  background-image: url("../../build/head_bg.png");

}
.showTime{
  position: absolute;
  right: .375rem;
  line-height: 75px;
  font-size: 20px;
  color: rgba(225,225,225,0.7);
  top: 0;
}
h1 {
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.wai{
  font-family: 微软雅黑;
  width: 100%;
  height: 1100px;
  background-image: url("../../build/bg.jpg");

  background-size:cover;
}
.wai img{
  font-family: 微软雅黑;
  width: 100%;
  height: 923px;

}

</style>
